<template>
  <div class="navigation-center">
    <client-carousel arrows="never" :url="banner" />
    <div class="navigation-title">
      <h2>{{ name }}</h2>
    </div>
    <div class="navigation-content">
      <h2 class="content-title">{{ name }}</h2>
      <div class="content-box">
        <div class="content-item" v-for="(i, k) in contentList" :key="i.id" @click="jumpDetails(i.id)">
          <div class="left">
            <img :src="baseURL + i.coverUrl" class="left"/>
          </div>
          <div class="right">
            <div>{{ i.title || "无" }}</div>
            <div class="msg">{{ i.introduction || "--" }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { getAssetURL } from "@/utils/load_assets";
import { navigationcontentList } from "@/api/menus/navigationSef";
const router = useRouter();
const route = useRoute();

const baseURL = import.meta.env.VITE_BASE_URL;
const bannerUrl = getAssetURL("common/sefBanner.png");
const banner = ref<any>([{ url: bannerUrl }]);
const id = ref<any>('');//导航类型id
const name = ref<any>('');//导航名字
const contentList = ref<any>([]);//导航内容数组

onMounted(() => {
  id.value = route.query.id;
  name.value = route.query.name;
  getNavigationList();
});

watch(route, (val) => {
  if ('/client/sefNavigation' == val.path) {
    id.value = val.query.id;
    name.value = val.query.name;
    getNavigationList();
  }
});

/**获取导航内容列表 */
const getNavigationList = () => {
  let data = {
    navigationBarTypeId: id.value,
    params: {
      pageNum: 1,
      pageSize: 10
    }
  }
  navigationcontentList(data).then((res: any) => {
    if (200 == res.code) {
      contentList.value = res.rows;
    }
  })
};

/**跳转详情页面 */
const jumpDetails = (id: any) => {
  router.push(`/client/sefNavigation/details?id=${id}`)
}


</script>
<style scoped lang="less">
.navigation-center {
  width: 100%;
  min-height: calc(100vh - 400px);
  position: relative;

  .navigation-title {
    position: absolute;
    left: 0;
    right: 0;
    top: 140px;
    display: flex;
    justify-content: center;

    h2 {
      width: 1200px;
      line-height: 60px;
      font-size: 40px;
      font-weight: 600;
      letter-spacing: 1px;
    }
  }

  .navigation-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    cursor: pointer;

    .content-title {
      font-size: 42px;
    }

    .content-box {
      width: 70vw;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .content-item {
        width: 48%;
        display: flex;
        margin-right: 10px;
        margin-bottom: 40px;
        .left {
          width: 280px;
          height: 124px;
        }

        .right {
          font-size: 16px;
          font-weight: 900;
          margin-left: 15px;

          .msg {
            font-size: 14px;
            line-height: 30px;
            font-weight: 400;
          }
        }
      }
    }
  }
}
</style>
